<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
		<!-- 结构 -->
		<!-- 页面头部分	 -->
		<header>
		<!-- nav部分 -->
			<nav>
				<!-- logo部分 -->
				<div class="logo">  
					<img src="images/logo_03.png" alt="">
				</div>
				<!-- 导航栏部分 -->
				<div class="navbar">
					<ul>
						<li><a href="#">首页</a></li>
						<li><a href="#">课程</a></li>
						<li><a href="#">职业规划</a></li>
					</ul>
				</div>
				<!-- 个人中心部分 -->
				<div class="personal">		
					<a href="#">个人中心 <img src="images/ling_06.png"  alt=""></a>
					<a href="#"><img src="images/tou_03.png" > 刘德华</a>
				</div>
				<!-- 搜索框部分 -->
				<div class="search">
					<form action="">
						<input type="text" placeholder="请输入关键词">
						<!-- placeholder占位符 内容输入自动清除默认值 -->
						<input type="submit"  value="">
					</form>
				</div>
			</nav>
		</header>

		<!-- banner部分 -->
		<div class="banner">
			<div class="banner-in container">
				
				<!-- 左侧导航栏 侧边栏 -->
				<div class="slidebar">
					<ul>
						<li><a href="#">前端开发 <span>></span> </a></li>
						<li><a href="#">后端开发 <span>></span> </a></li>
						<li><a href="#">移动开发 <span>></span> </a></li>
						<li><a href="#">人工智能 <span>></span> </a></li>
						<li><a href="#">商业预测 <span>></span> </a></li>
						<li><a href="#">云计算&大数据 <span>></span> </a></li>
						<li><a href="#">运维&从测试 <span>></span> </a></li>
						<li><a href="#">UI设计 <span>></span> </a></li>
						<li><a href="#">产品 <span>></span> </a></li>
					</ul>
				</div>

				<!-- 小课表部分 -->
				<dl class="timetable">
					<dt>我的课程表</dt>
					<dd>
						<h4>继续学习 程序语言设计</h4>
						<p>正在学习-使用对象</p>
					</dd>
					<dd>
						<h4>继续学习 程序语言设计</h4>
						<p>正在学习-使用对象</p>
					</dd>
					<dd>
						<h4>继续学习 程序语言设计</h4>
						<p>正在学习-使用对象</p>
					</dd>
				
					<dd>
						<a href="#">全部课程</a>
					</dd>
				</dl>

				<ul class="circle">
					<li class="current"></li>  <!-- 当前的li -->
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
	

		</div>

		<div class="recommend container"> <!-- 精品推荐 -->
			<a href="#">精品推荐</a>
			<a href="#">Jquery</a>
			<a href="#">Spart</a>
			<a href="#">MySql</a>
			<a href="#">javaWeb</a>
			<a href="#">MySql</a>
			<a href="#">javaWeb</a>
			<a href="#">修改兴趣</a>
		</div>

		<!-- 精品推荐大模块 -->
		<div class="recom-products container">
			<div class="recom-hd"><!--  精品推荐头部 -->
				<h4>精品推荐</h4>
				<a href="#">查看全部</a>
			</div>
			<div class="recom-bd clearfix"><!--  精品推荐主体部分 -->
				<ul>
					<li>
						<img src="images/icon1.png"  alt="">
						<h5>Think PHP 5.0 博客系统实战项目演练</h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</li>
					<li>
						<img src="images/icon1.png"  alt="">
						<h5>Think PHP 5.0 博客系统实战项目演练</h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</li>
					<li>
						<img src="images/icon1.png"  alt="">
						<h5>Think PHP 5.0 博客系统实战项目演练</h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</li>
					<li>
						<img src="images/icon1.png"  alt="">
						<h5>Think PHP 5.0 博客系统实战项目演练</h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</li>
					<li>
						<img src="images/icon1.png"  alt="">
						<h5>Think PHP 5.0 博客系统实战项目演练</h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</li>
					<li>
						<img src="images/icon1.png"  alt="">
						<h5>Think PHP 5.0 博客系统实战项目演练</h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</li>
					<li>
						<img src="images/icon1.png"  alt="">
						<h5>Think PHP 5.0 博客系统实战项目演练</h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</li>
					<li>
						<img src="images/icon1.png"  alt="">
						<h5>Think PHP 5.0 博客系统实战项目演练</h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</li>
					<li>
						<img src="images/icon1.png"  alt="">
						<h5>Think PHP 5.0 博客系统实战项目演练</h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</li>
					<li>
						<img src="images/icon1.png"  alt="">
						<h5>Think PHP 5.0 博客系统实战项目演练</h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</li>
				</ul>
			</div>
		</div>

		<!-- 页面底部分 -->
		<footer>
			<div class="container footer-in">
				<div class="footer-l">
					<img src="images/logo-s.png" height="43" width="197" alt="">
					<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br />
© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
					<a href="#">下载APP</a>
				</div>
				<div class="footer-r">
					<dl>
						<dt>关于学成网</dt>
						<dd><a href="#">关于</a></dd>
						<dd><a href="#">管理团队</a></dd>
						<dd><a href="#">工作机会</a></dd>
						<dd><a href="#">客户服务</a></dd>
						<dd><a href="#">帮助</a></dd>
					</dl>
					<dl>
						<dt>关于学成网</dt>
						<dd><a href="#">关于</a></dd>
						<dd><a href="#">管理团队</a></dd>
						<dd><a href="#">工作机会</a></dd>
						<dd><a href="#">客户服务</a></dd>
						<dd><a href="#">帮助</a></dd>
					</dl>
					<dl>
						<dt>关于学成网</dt>
						<dd><a href="#">关于</a></dd>
						<dd><a href="#">管理团队</a></dd>
						<dd><a href="#">工作机会</a></dd>
						<dd><a href="#">客户服务</a></dd>
						<dd><a href="#">帮助</a></dd>
					</dl>
				</div>
			</div>
		</footer>
    </body>
</html>